<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
	<head>
		<base href="/webcon/resources/"/>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>定时音乐列表</title>
		<link rel="stylesheet" href="layui/css/layui.css">
		<link rel="stylesheet" href="css/timing.css">

		<script src="js/jquery-3.5.0.min.js"></script>
		<script src="layui/layui.js"></script>

		<!-- 引入bootstrap -->
		<link rel="stylesheet" type="text/css" href="/bootstrap/css/bootstrap.min.css"/>
		<script type="text/javascript" src="/bootstrap/js/bootstrap.min.js"></script>

		<!--引入webuploader-->
		<link rel="stylesheet" type="text/css" href="widget/webuploader/webuploader.css">
		<script type="text/javascript" src="widget/webuploader/webuploader.min.js"></script>

		<!-- 引入ztree -->
		<link rel="stylesheet" href="widget/zTree/zTreeStyle/zTreeStyle.css"/>
		<script type="text/javascript" src="widget/zTree/jquery.ztree.all.min.js"></script>

		<!-- 自定义js -->
		<script type="text/javascript" th:src="${#request.getContextPath() + '/commons/js/myupload.js'}"></script>
		<script type="text/javascript" th:src="${#request.getContextPath() + '/commons/js/myztree.js'}"></script>
		<script type="text/javascript" th:src="${#request.getContextPath() + '/commons/js/myajax.js'}"></script>
		<script type="text/javascript" th:src="${#request.getContextPath() + '/commons/js/mytask.js'}"></script>
		<script type="text/javascript" th:src="${#request.getContextPath() + '/commons/js/task_time.js'}"></script>
		<script type="text/javascript" th:src="${#request.getContextPath() + '/commons/js/mytask_status.js'}"></script>

		<!-- 日期插件 -->
		<link rel="stylesheet"
			  th:href="${#request.getContextPath() + '/system/resources/widget/My97DatePicker/skin/WdatePicker.css'}"
			  type="text/css"/>
		<script type="text/javascript"
				th:src="${#request.getContextPath() + '/system/resources/widget/My97DatePicker/WdatePicker.js'}"></script>


		<script th:inline="javascript">
			$(function () {
				//获取方案列表
				initSolutionList();
			});


		</script>

	</head>
	<body>
		<div class="header">
			<div class="list-item" onclick="openModal(0)">
				<div class="list-item-top">
					<img src="./img/xinjian.png" />
				</div>
				<div class="desc">新建任务</div>
			</div>
			<div class="list-item" onclick="openModal(1)">
				<div class="list-item-top">
					<img src="./img/bianji.png" />
				</div>
				<div class="desc">编辑任务</div>
			</div>
			<div class="list-item" onclick="isAction(2, 1);">
				<div class="list-item-top">
					<img src="./img/shanchu.png" />
				</div>
				<div class="desc">删除任务</div>
			</div>
			<div class="list-item" onclick="copy_task(timeMusicHtml);">
				<div class="list-item-top">
					<img src="./img/fuzhi.png" />
				</div>
				<div class="desc">复制任务</div>
			</div>
			<div class="list-item" onclick="action_task();">
				<div class="list-item-top">
					<img src="./img/bofang.png" />
				</div>
				<div class="desc">手动执行</div>
			</div>
			<div class="list-item" onclick="pause_task();">
				<div class="list-item-top">
					<img src="./img/zt.png" />
				</div>
				<div class="desc">手动暂停</div>
			</div>
			<div class="list-item" onclick="stop_task();">
				<div class="list-item-top">
					<img src="./img/tingzhi.png" />
				</div>
				<div class="desc">手动停止</div>
			</div>
<!--			<div class="list-item">-->
<!--				<div class="list-item-top">-->
<!--					<img src="./img/syq.png" />-->
<!--				</div>-->
<!--				<div class="desc">上一曲</div>-->
<!--			</div>-->
<!--			<div class="list-item">-->
<!--				<div class="list-item-top">-->
<!--					<img src="./img/xyq.png" />-->
<!--				</div>-->
<!--				<div class="desc">下一曲</div>-->
<!--			</div>-->
			<div class="list-item" onclick="newPlan()">
				<div class="list-item-top">
					<img src="./img/xinjian.png" />
				</div>
				<div class="desc">新建方案</div>
			</div>
			<div class="list-item"  onclick="newPlan2()">
				<div class="list-item-top">
					<img src="./img/bianji.png" />
				</div>
				<div class="desc">编辑方案</div>
			</div>
			<div class="list-item" onclick="exec_Solution()">
				<div class="list-item-top">
					<img src="./img/bofang.png" />
				</div>
				<div class="desc">执行方案</div>
			</div>
			<div class="list-item" onclick="delete_Solution()">
				<div class="list-item-top">
					<img src="./img/shanchu.png" />
				</div>
				<div class="desc">删除方案</div>
			</div>
		</div>
		<div>
			<div class="layui-row">
				<div class="layui-col-md3 layui-form" style="height: 38px;line-height: 38px;">
					当前执行方案：<span class="currtTask" id="solution_default">默认方案</span>
				</div>
				<div class="layui-col-md1 layui-form" style="height: 38px;line-height: 38px;">
					<span>方案选择：</span>
				</div>
				<div class="layui-col-md3 layui-form">
					<select id="solution_select" lay-verify="" lay-filter="solution_select">
					</select>
				</div>
			</div>
		</div>

		<table class="layui-table">
			<thead>
			<tr>
				<th>任务名称</th>
				<th>任务状态</th>
				<th>开始时间</th>
				<th>持续时间</th>
				<th>结束日期</th>
				<th>播放类型</th>
				<th>任务音量</th>
				<th>当前播放曲目</th>
				<th>任务进度</th>
			</tr>
			</thead>
			<tbody id="task_list">
			<!-- TODO 任务列表 -->
			</tbody>
		</table>

		<!-- 定时任务的弹出框 -->
		<div id="tt" style="padding:20px 35px;display: none;">
			<div class="item" style="width: 260px; height: 500px;" >
				<div style="padding: 10px 10px;">
					<div class="layui-row">
						<div class="layui-col-md4">
							<span class="task-name">任务名称:</span>
						</div>
						<div class="layui-col-md8">
							<input type="text" id="taskname" placeholder="任务名称" required lay-verify="required" autocomplete="off" class="layui-input">
						</div>
					</div>
					<div class="layui-row" style="padding-top: 5px;">
						<div class="layui-col-md4">
							<span class="task-name">任务类型:</span>
						</div>
						<div class="layui-col-md8 layui-form">
							<select id="playOrder" lay-filter="playOrder" lay-verify="">
								<option value="1">每天任务</option>
								<option value="2">每周任务</option>
								<option value="3">一次任务</option>
							</select>
						</div>
					</div>
					<div class="layui-row" style="padding-top: 5px;">
						<div class="layui-col-md4">
							<span class="task-name">开始日期:</span>
						</div>
						<div class="layui-col-md8">
							<input id="startDate" type="text" placeholder="开始日期"
								   required lay-verify="required" autocomplete="off" class="layui-input"
								   onclick="WdatePicker({dateFmt:'yyyy-MM-dd'})"/>
						</div>
					</div>
					<div class="layui-row" style="padding-top: 5px;">
						<div class="layui-col-md4">
							<span class="task-name">开始时间:</span>
						</div>
						<div class="layui-col-md8">
							<input id="startTime" type="text" placeholder="开始时间"
								   required lay-verify="required" autocomplete="off" class="layui-input"
								   onclick="WdatePicker({dateFmt:'HH:mm'})">
						</div>
					</div>
					<div class="layui-row" style="padding-top: 5px;">
						<div class="layui-col-md4">
							<span class="task-name">结束时间:</span>
						</div>
						<div class="layui-col-md4">
							<input id="endTime" type="text" placeholder="结束时间"
								   required lay-verify="required" autocomplete="off" class="layui-input"
								   onclick="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm'})" disabled="disabled"/>
						</div>
						<div class="layui-col-md4 layui-form" style="text-align: right;">
							<input id="checkbox_end" type="checkbox" lay-filter="checkbox_end"
								   lay-skin="switch" lay-text="ON|OFF"/>
						</div>
					</div>
					<div class="layui-row" style="padding-top: 5px;">
						<div class="layui-col-md4">
							<span class="task-name">持续时间:</span>
						</div>
						<div class="layui-col-md4">
							<input type="text" id="durtime" placeholder="持续时间"
								   required lay-verify="required" autocomplete="off" class="layui-input" disabled="disabled">
						</div>
						<div class="layui-col-md4 layui-form" style="text-align: right;">
							<input id="checkbox_dur" type="checkbox" lay-filter="checkbox_dur"
								   lay-skin="switch" lay-text="ON|OFF">
						</div>
					</div>
					<div class="layui-row" style="padding-top: 5px;">
						<div class="layui-col-md4">
							<span class="task-name">提前开启:</span>
						</div>
						<div class="layui-col-md8">
							<input id="start" type="text" placeholder="提前开启"
								   required lay-verify="required" autocomplete="off" class="layui-input"
								   onclick="WdatePicker({dateFmt:'ss'})"/>
						</div>
					</div>
					<div class="layui-row" style="padding-top: 5px;">
						<div class="layui-col-md4">
							<span class="task-name">音量选择:</span>
						</div>
						<div class="layui-col-md8">
							<input type="text" id="volume" value="10"
								   required lay-verify="required" autocomplete="off" class="layui-input">
						</div>
					</div>
					<div class="layui-row" style="padding-top: 5px;">
						<div class="layui-col-md4">
							<span class="task-name">播放类型:</span>
						</div>
						<div class="layui-col-md8 layui-form">
							<select id="loopType" name="loopType" lay-verify="">
								<option value="0">随机播放</option>
								<option value="1">循环播放</option>
								<option value="2">顺序播放</option>
							</select>
						</div>
					</div>

					<div style="padding-top: 5px;">
						<div class="layui-row">
							<div class="layui-col-md12">
								<span class="task-name">星期选择:</span>
							</div>
						</div>
						<div class="layui-row" style="margin-bottom: 5px;">
							<div class="layui-col-md4  layui-form">
								<input name="week" type="checkbox" value="2"
									   disabled="disabled" title="星期一" lay-skin="primary"/>
							</div>
							<div class="layui-col-md4  layui-form">
								<input name="week" type="checkbox" value="4"
									   disabled="disabled" title="星期二" lay-skin="primary"/>
							</div>
							<div class="layui-col-md4  layui-form">
								<input name="week" type="checkbox" value="8"
									   disabled="disabled" title="星期三" lay-skin="primary"/>
							</div>
						</div>
						<div class="layui-row" style="margin-bottom: 5px;">
							<div class="layui-col-md4  layui-form">
								<input name="week" type="checkbox" value="16"
									   disabled="disabled" title="星期四" lay-skin="primary"/>
							</div>
							<div class="layui-col-md4  layui-form">
								<input name="week" type="checkbox" value="32"
									   disabled="disabled" title="星期五" lay-skin="primary"/>
							</div>
							<div class="layui-col-md4  layui-form">
								<input name="week" type="checkbox" value="64"
									   disabled="disabled" title="星期六" lay-skin="primary"/>
							</div>
						</div>
						<div class="layui-row">
							<div class="layui-col-md12  layui-form">
								<input name="week" type="checkbox" value="128"
									   disabled="disabled" title="星期天" lay-skin="primary"/>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="item item1" style="width: 580px;height: 470px;">
				<div id="picker" class="layui-btn">本地上传</div>
				<button id="upload_btn" class="layui-btn" onclick="start_upload();">
					开始上传
				</button>
				<div id="yun_btn" class="layui-btn" onclick="open_show_yun();">云端选择</div>
				<div style="margin-top: 10px; height: 380px;  overflow: auto;">
					<!--<table class="table">
                        <thead>
                        <tr>
                            <th colspan="2">音乐列表</th>
                        </tr>
                        </thead>
                        <tbody id="upload_list">
                        </tbody>
                    </table>-->
					<h4>音乐列表</h4>
					<ul class="list-group" id="upload_list">
						<li class="list-group-item">Cras justo odio</li>
						<li class="list-group-item">Dapibus ac facilisis in</li>
						<li class="list-group-item">Morbi leo risus</li>
						<li class="list-group-item">Porta ac consectetur ac</li>
						<li class="list-group-item">Vestibulum at eros</li>
					</ul>
				</div>
			</div>
			<div class="item item2" style="height: 500px;">
				<div style="padding-left: 10px;padding-top: 10px;">
					<span>终端列表：</span>
					<input class="selectAll" id="checkbox1" onclick="checkall(this.checked);" style="width: 18px;height: 18px;position: relative;top: 4px;" type="checkbox">
					全选
				</div>
				<!-- 树形选择器 -->
				<div id="ztree_div" class="ztree"
					 style="height: 430px; overflow:scroll; overflow-y: auto; overflow-x: auto;"></div>
			</div>
		</div>

		<!-- 方案弹出框 -->
		<div id="tt2" class="layui-form" style="display:none;">
			<div class="layui-form-item" style="padding-top:20px">
			    <label class="layui-form-label">方案名称:</label>
			    <div class="layui-input-block">
			      <input style="width:300px"  id="solutionname" type="text" placeholder="请输入方案名称" autocomplete="off" class="layui-input">
			    </div>
			  </div>
		</div>

		<!-- 编辑方案 -->
		<div id="tt3" class="layui-form" style="display:none;">
			<div class="layui-form-item" style="padding-top:20px">
				<label class="layui-form-label">方案名称:</label>
				<div class="layui-input-block">
					<input style="width:300px"  id="solutionname2" type="text" placeholder="请输入方案名称" autocomplete="off" class="layui-input">
				</div>
			</div>
		</div>

		<!-- 云端列表 -->
		<div id="yunlistdiv" style="display: none;">
			<ul class="list-group" id="yun_upload_list">
			</ul>
		</div>

		<script>
			var checked = false;
			$(".selectAll").attr("checked", checked);
			layui.use(['table', 'form', 'layer', 'laydate'], function() {
				var table = layui.table;
				var form = layui.form;
				var layer = layui.layer;
				var laydate = layui.laydate;

				//执行一个laydate实例
				laydate.render({
					elem: '#date1' //指定元素
				});

				//监听开关事件
				form.on('switch(checkbox_end)', function (data) {
					var contexts;
					var x = data.elem.checked;//判断开关状态
					//修改状态
					open_end(x);
					return true;
				});

				//监听开关事件
				form.on('switch(checkbox_dur)', function (data) {
					var contexts;
					var x = data.elem.checked;//判断开关状态
					open_dur(x);
					return true;
				});

				//播放类型选择事件
				form.on('select(playOrder)', function (data) {
					//TODO执行自己的代码
					select_type(data.value, 2);
				});

				//方案切换
				form.on('select(solution_select)', function (data) {
					//TODO执行自己的代码
					selectSolution();
				});
			});

			function deleteTer() {
				layer.confirm('确定要删除吗?', {
					icon: 3,
					title: '系统提示'
				}, function(index) {
					layer.close(index);
				});
			}

			function openModal(num) {
				layer.open({
					type: 1,
					area: ['1200px', '650px'],
					title: '定时音乐',
					offset: '20px',
					btn: ['确定', '取消'],
					shade: 0.6,
					maxmin: false,
					anim: 4,
					content: $("#tt"),
					yes: function(index, layero){
						if(num == 0){
							//提交任务
							submit_task();
						} else if(num == 1){
							//修改任务
							var task = $("[alt='del']")[0];
							var tid = task.getAttribute("taskidstr");
							update_task(tid);
						}
						return true;
					},success: function(layero, index){
						$('body').attr('style','overflow:hidden')

						if(num == 0){
							//初始化弹出框
							open_Model(1);
						} else if(num == 1){
							//编辑任务
							isAction(1, 1);
						}
					},
					cancel: function(index, layero){
						$('body').removeAttr('style')
					}
				});

			}

            function newPlan() {
            	layer.open({
            		type: 1 //Page层类型
            			,
            		area: ['500px', '200px'],
            		title: '新建方案',
            		offset: '20px',
            		btn: ['确定', '取消'],
            		shade: 0.6, //遮罩透明度
            		anim: 4, //0-6的动画形式，-1不开启
            		content: $("#tt2"),
					yes:function (index, layero) {
						//新建方案
						submit_solution();
						layer.close(index);
					}
            	});
            }

			function newPlan2() {
				layer.open({
					type: 1 //Page层类型
					,
					area: ['500px', '200px'],
					title: '编辑方案',
					offset: '20px',
					btn: ['确定','取消'],
					shade: 0.6, //遮罩透明度
					anim: 4, //0-6的动画形式，-1不开启
					content: $("#tt3"),
					yes:function (index, layero) {
						//编辑方案
						update_solution();
						layer.close(index);
					}
				});
			}
		</script>
	</body>
</html>
